<template>
	<view class="container">
	<view class="input-group">
			<!-- <view> -->
					<!-- 提示窗示例 -->
				<!-- 	<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
					</uni-popup>
				</view> -->
				<input class="input" type="text"  placeholder="请输入4~6位数字或字母用户名" @blur="username">
					<uni-icons  :type="s1" :size="28" :color="c1" />
			</view>
			<view class="input-group">
						<input class="input" type="text"  placeholder="请输入2-16位中文昵称" @blur="nickname">
						<uni-icons  :type="s2" :color="c2" :size="28"  />
					</view>
		<view class="input-group">
	<input class="input" :password="ispassworda"     placeholder="请输入6位数密码" @blur="upwd" >
	<uni-icons :type="ispassworda ? 'eye-slash' : 'eye'" size="20" @click="ispassworda=!ispassworda"></uni-icons>
	<uni-icons  :type="s3" :color="c3" :size="28" />
	
		</view>
		
		<view class="input-group">
		<input class="input" :password="ispasswordb" placeholder="在输入一次密码" @blur="upwds">
		<uni-icons :type="ispasswordb ? 'eye-slash' : 'eye'" size="20" @click="ispasswordb=!ispasswordb"></uni-icons>
		<uni-icons  :type="s4" :color="c4" :size="28"  />
			</view>	
		<view class="input-group">
					<input class="input" type="text" placeholder="邮箱" @blur="email">
					<uni-icons :type="s5" :color="c5" :size="28"  />
				</view>
		<view class="input-group">
					<input class="input" type="text" placeholder="手机号" @blur="phone">
					<uni-icons :type="s6" :color="c6" :size="28"  />
				</view>
		<view class="input-grounp">
		<button type="primary" class="button" @click="checkFrom">注册</button>
		<text class="text" @click="goToLogin">已有账号？现在去登陆</text>
	</view>
	</view>
</template>

<script>
	import {userRegister} from '@/service/index.js'
	export default {
		// name:"Register",
		data() {
			return {
				// type: 'center',
				// msgType: 'success',
			 //   messageText: '这是一条成功提示',
				s1:'checkbox-filled',
				c1:'transparent',
				s2:'checkbox-filled',
				c2:'transparent',
				s3:'checkbox-filled',
				c3:'transparent',
				s4:'checkbox-filled',
				c4:'transparent',
				s5:'checkbox-filled',
				c5:'transparent',
				s6:'checkbox-filled',
				c6:'transparent',
				up:'',
				t1:'',
				t2:'',
				t3:'',
				t4:'',
				t5:'',
				t6:'',
				username1:'',
				nickname1:'',
				phone1:'',
				upwd1:'',
				email1:'',
				ispassworda:true,
				ispasswordb:true,
				
			};
		},
		methods:{
			// dialogClose() {
			// 				console.log('点击关闭')
			// 			},
			// 	dialogToggle(type) {
			// 				this.msgType = type
			// 				this.$refs.alertDialog.open()
			// 			},
			// 			dialogConfirm() {
			// 				console.log('点击确认')
			// 				this.messageText = `点击确认了 ${this.msgType} 窗口`
							
			// 			},
			goToLogin(){
				this.$emit('showChild',{childName:'Login'})
			},
			username(e){
				console.log(e.detail.value)
				let username=e.detail.value
				  let exp =/^[a-zA-Z0-9]{4,6}$/;     
				      if (exp.test(username)) {
				        console.log("验证通过");
				        this.c1 ="green" ;
						this.username1=username
				      this.t1=true
				      } else {
				        console.log("用户名验证失败");
				        this.c1 = "red";
						this.s1="clear"
						this.t1=false
				    
				      }
				
			},
			nickname(e){
				console.log(e.detail.value)
				let nickname=e.detail.value
				let exp =/^([\u4e00-\u9fa5]{2,8})$/;  
				      if (exp.test(nickname)) {
				        console.log("验证通过");
				       this.c2 ="green" ;
					   this.nickname1=nickname
					    this.t2=true
				     
				      } else {
				        console.log("用户名验证失败");
				       this.c2 = "red";
				       this.s2="clear"
					   this.t2=false
				   
						
				      }
			},
			upwd(e){
					let upwd=e.detail.value
				      let exp = /^\d{6}$/
				      if (exp.test(upwd)) {
				          this.c3 ="green" ;
						  this.up=upwd
						   this.t3=true
						   this.upwd1=upwd
				
				      } else {
				        this.c3 = "red";
				        this.s3="clear"
						this.t3=false
				    
				      }
			},
			upwds(e){
				console.log(e.detail.value)
				let upwds=e.detail.value
				  let exp = /^\d{6}$/;
				      if (exp.test(upwds) && this.up ==upwds) {
                       this.c4 ="green" ;
					    this.t4=true
				 
				      } else {
				        this.c4 = "red";
				        this.s4="clear"
						    this.t4=false
				   
				      }
			},
			email(e){
				let email=e.detail.value
				let exp=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
				if (exp.test(email)) {
				  console.log("验证通过");
				   this.t5=true
				 this.c5 ="green" ;
				 this.email1=email
			
				} else {
				 this.c5 = "red";
				 this.s5="clear"
				     this.t5=false
				 
				}
	
			},
			phone(e){
				let phone=e.detail.value
				let exp =/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
				      if (exp.test(phone)) {
				        console.log("验证通过");
				       this.c6 ="green" ;
					    this.t6=true
				      this.phone1=phone
				      } else {
				       this.c6 = "red";
				       this.s6="clear"
					     this.t6=false
				       
				      }
			},
			  async checkFrom() {
			      //当点击提交按钮时执行
			      if (this.t1&&this.t2&& this.t3&&this.t4&&this.t5&&this.t6) {
			         let res=await userRegister(this.username1,this.nickname1,this.upwd1,this.email1,this.phone1)

					 console.log(res)
			    
			      } else {
			        console.log("验证失败");
					// this.$refs.alertDialog.open()
			      }
			    },
			
			
		},
		mounted() {
			//uni-app中组件的生命周期方法!!不放在methods里
			uni.setNavigationBarTitle({
				title:'用户注册'
			})
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 20px;
		.input-group{
			border-bottom: 1px solid #c8c7cc;
			padding: 12px 10px;
			display: flex;
			align-items: center;
			input{
		  flex: 1;
			}
			.separator{
				margin: 0 .5em;
			}
		}
		.button{
			margin-top: 40px ;
			margin-bottom: 10px;
			border-radius: 40px;
			background-color: #a397fd;
		}
		.text{
			color: #666;
		}
	
	}

</style>